<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>根据数据生成表单</title>
    <style>
        textarea{
            width: 200px;
            height: 60px;
            resize: none;
        }
    </style>
</head>
<body>
    <form action="">
        <!-- 用户名 -->
        <!-- <label for="username">用户名</label><input type="text"></br> -->
        <!-- 密码 -->
        <!-- <label for="password">密码</label><input type="password"></br> -->
        <!-- 性别 -->
        <!-- <label for="sex">性别</label>
        <select name="sex" id="sex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select><br> -->
        <!-- 爱好 -->
        <!-- <label for="hobby">爱好</label>
        <input type="checkbox" id='baseball'><label for="baseball">篮球</label>
        <input type="checkbox" id='football'><label for="football">足球</label>
        <input type="checkbox" id='badminton '><label for="badminton">羽毛球</label>
        <input type="checkbox" id='tableTennis'><label for="tableTennis">乒乓球</label>
        <input type="checkbox" id='climbMountain'><label for="climbMountain">爬山</label>
        <input type="checkbox" id='shopping'><label for="shopping">购物</label>
        <input type="checkbox" id='travel'><label for="travel">旅游</label>
        <input type="checkbox" id='beauty'><label for="beauty">看美女</label><br> -->
        <!-- 婚姻 -->
        <!-- <label for="marriage">是否已婚</label>
        <input type="radio" name='marriage' id='single'><label for="single">单身</label>
        <input type="radio" name='marriage' id='married'><label for="married">已婚</label><br> -->
        <!-- 简介 -->
        <!-- <label for="">简介</label><br>
        <textarea name="Introduction" id="Introduction" cols="30" rows="10"></textarea> -->
    </form>

    <script>
        // 数据
        var arr = [
                {
                    label: "用户名",
                    name: "username",
                    type: "text"
                }, {
                    label: "密码",
                    name: "password",
                    type: "password"
                }, {
                    label: "性别",
                    name: "gender",
                    type: "select",
                    value: ['男', '女', '不男', '不女', 'Gay', '妖王']
                }, {
                    label: "爱好",
                    name: "hobby",
                    type: "checkbox",
                    value: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']
                }, {
                    label: '是否已婚',
                    name: 'married',
                    type: 'radio',
                    value: ['已婚', '未婚']
                },
                {
                    label: '简介',
                    name: 'resume',
                    type: 'textarea'
                }];
        /* 以下整体可用foreach循环+switch分支解决，不过目前能力不够 */

        // 获取表单
        var form = document.querySelector('form');

        // 1.用户名
        var userRes = arr.filter(function(item,index){
            return item.label == '用户名';
        })[0];
        // 创建label和input
        var userLabel = document.createElement('label');
        userLabel.innerText = userRes.label;
        userLabel.setAttribute('name',userRes.name); 
        var userinput = document.createElement('input');
        userinput.type = userRes.type;
        // 插入
        form.appendChild(userLabel);
        form.appendChild(userinput);
        form.innerHTML += '</br>';

        // 2.密码
        var passwordRes = arr.filter(function(item,index){
            return item.label == '密码';
        })[0];
        // 创建label和input
        var passwordLabel = document.createElement('label');
        passwordLabel.innerText = passwordRes.label;
        passwordLabel.setAttribute('name',passwordRes.name); 
        var passwordinput = document.createElement('input');
        passwordinput.type = passwordRes.type;
        // 插入
        form.appendChild(passwordLabel);
        form.appendChild(passwordinput);
        form.innerHTML += '</br>';

        // 3.性别
        var sexRes = arr.filter(function(item,index){
            return item.label == '性别';
        })[0];
        // 创建label和select
        var sexLabel = document.createElement('label');
        sexLabel.innerText = sexRes.label;
        sexLabel.setAttribute('name',sexRes.name); 
        var sexSelect = document.createElement('select');
        sexSelect.setAttribute('name',sexRes.name)
        // 插入
        form.appendChild(sexLabel);
        form.appendChild(sexSelect);
        for(var i=0;i<sexRes.value.length;i++){
            var sexOption = document.createElement('option');
            sexOption.setAttribute('value',sexRes.value[i]);
            sexOption.innerText = sexRes.value[i];
            sexSelect.appendChild(sexOption);
        }
        form.innerHTML += '</br>';

        // 4.爱好
        var hobbyRes = arr.filter(function(item,index){
            return item.label == '爱好';
        })[0];
        console.log(hobbyRes)
        // 创建
        var hobbyLabel = document.createElement('label');
        hobbyLabel.innerText = hobbyRes.label;
        hobbyLabel.setAttribute('name',hobbyRes.name); 
        // 插入
        form.appendChild(hobbyLabel);
        for(var j=0;j<hobbyRes.value.length;j++){
            // input
            var hobbyInput = document.createElement('input');
            hobbyInput.type = hobbyRes.type;
            // label
            var hobbyLabelChild = document.createElement('label');
            hobbyLabelChild.innerText = hobbyRes.value[j];
            form.appendChild(hobbyInput);
            form.appendChild(hobbyLabelChild);
        }
        form.innerHTML += '</br>';

        // 5.婚姻
        var marryRes = arr.filter(function(item,index){
            return item.label == '是否已婚';
        })[0];
        // 创建
        var marryLabel = document.createElement('label');
        marryLabel.innerText = marryRes.label;
        marryLabel.setAttribute('name',marryRes.name); 
        // 插入
        form.appendChild(marryLabel);
        for(var k=0;k<marryRes.value.length;k++){
            // input
            var marryInput = document.createElement('input');
            marryInput.type = marryRes.type;
            marryInput.name = marryRes.name;
            // label
            var marryLabelChild = document.createElement('label');
            marryLabelChild.innerText = marryRes.value[k];
            form.appendChild(marryInput);
            form.appendChild(marryLabelChild);
        }
        form.innerHTML += '</br>';

        // 6.简介
        var areaRes = arr.filter(function(item,index){
            return item.label == '简介';
        })[0];
        // 创建
        var areaLabel = document.createElement('label');
        areaLabel.innerText = areaRes.label;
        areaLabel.setAttribute('name',areaRes.name); 
        var textarea = document.createElement('textarea');
        // 插入
        form.appendChild(areaLabel);
        form.innerHTML += '</br>';
        form.appendChild(textarea);
    </script>
</body>
</html>